<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" inline label-width="80px">
      <el-form-item label="客户名称" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入关键字"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="费用类型" prop="shoppingCarEnums">
        <el-select v-model="queryParams.shoppingCarEnums">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查询月份" prop="month">
        <el-date-picker
          v-model="month"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月份"
          @change="confirmMonth"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10">
      <p>消费金额：¥ {{ costCount.consumption || 0 }}元，成交订单：{{ costCount.orderCount || 0 }}</p>
    </el-row>

    <el-table v-loading="loading" :data="dataList" border>
      <el-table-column label="客户名称" align="center" prop="nickName" />
      <el-table-column label="支付编码" align="center" prop="sn" />
      <el-table-column label="费用类型" align="center" prop="shoppingCarEnums">
        <template slot-scope="scope">
          <span v-if="scope.row.paymentMethod == 'PLATFORM_DECREASE' || scope.row.paymentMethod == 'PLATFORM_INCREASE'">{{ scope.row.productTypeName }}</span>
          <span v-else>{{ scope.row.shoppingCarEnums | ctCostType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center" prop="paymentMethod">
        <template slot-scope="scope">
          <span>{{ scope.row.paymentMethod | ctPaymentMethod }}</span>
        </template>
      </el-table-column>
      <el-table-column label="金额(元)" align="center" prop="money">
        <template slot-scope="scope">
          <span>{{ scope.row.money | positiveNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="使用时长" align="center" prop="term" />
      <el-table-column label="支付时间" align="center" prop="createTime" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.params.pageNum"
      :limit.sync="queryParams.params.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listRecharge, totalMoney } from "@/api/financialManagement/rechargeManagement";
import { getTime } from "@/utils/common";

export default {
  data() {
    return {
      costCount: {
        all: 0,
        consumption: 0,
        orderCount: 0
      }, // 统计
      loading: false, // 遮罩层
      total: 0, // 总条数
      dataList: [], // 表格数据
      month: null, // 查询月份
      // 查询参数
      queryParams: {
        nickName: null, //关键字查询
        shoppingCarEnums: null, //费用类型
        paymentMethod: "WALLET",
        params: {
          pageNum: 1,
          pageSize: 10,
          startTime: null, // 开始时间
          endTime: null, // 结束时间
        },
      },
      //费用类型下拉框数据
      typeList: [
        { value: "CLOUD_SERVER", label: "云服务器" },
        { value: "CLOUD_MARKET", label: "云市场" },
        { value: "GOV_CLOUD", label: "政务云" },
        { value: "CLOUD_SERVER_RENEW", label: "云服务器续费" },
        { value: "CLOUD_SERVER_CHANGE", label: "云服务器变更" },
      ],
    };
  },
  created() {
    this.getTotal();
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      listRecharge(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.params.pageNum = 1;
      this.getList();
      this.getTotal();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.month = null;
      this.queryParams.shoppingCarEnums = null;
      this.queryParams.nickName = null;
      this.queryParams.params.startTime = null;
      this.queryParams.params.endTime = null;
      this.handleQuery();
    },
    // 计算月份
    confirmMonth(val) {
      if (val) {
        let date = new Date(val);
        let year = date.getFullYear();
        let month = date.getMonth();
        this.queryParams.params.startTime = getTime(new Date(year, month, 1));
        this.queryParams.params.endTime = getTime(new Date(year, month + 1, 0));
      } else {
        this.queryParams.params.startTime = null;
        this.queryParams.params.endTime = null;
      }
    },
    // 获取费用统计
    getTotal() {
      totalMoney(this.queryParams).then((res) => {
        this.costCount = res.data;
      });
    },
  },
};
</script>
